<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import router from '@/router';
import {useGameStore} from '@/stores/game'

const gameStore = useGameStore()
const activeName = ref('first')
//定义一个入门数组
const ruMeng = ref([])
//定义一个普通数组
const puTon = ref([])
//定义一个初级数组
const chuJi = ref([])
//定义一个中级数组
const zhonJi = ref([])
//定义一个高技数组
const gaoJi = ref([])


//在mounted生命周期中来过滤数据
onMounted(() => {
  //拿到入门数据
  ruMeng.value = gameStore.game.filter(item => item.category === 1)
  console.log(ruMeng.value)
  //拿到普通数据
  puTon.value = gameStore.game.filter(item => item.category === 2)
  //拿到初级数据
  chuJi.value = gameStore.game.filter(item => item.category === 3)
  //拿到中级数据
  zhonJi.value = gameStore.game.filter(item => item.category === 4)
  //拿到高技数据
  gaoJi.value = gameStore.game.filter(item => item.category === 5)
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

function start(id) {
  console.log(id)
  router.push({
    path: '/start',
    query: {
      id: id
    }
  })
}

function back() {
  router.back()
}
</script>

<template>
  <el-row class="header">
    <el-button style="margin:5px 0 0 5px" @click="back">返回</el-button>
    <span class="title">刷题练一练</span>
  </el-row>
  <el-row>
    <el-col :span="4" class="left">

    </el-col>
    <el-col :span="20">
      <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
      >
        <el-tab-pane label="入门" name="first">
          <ul class="ul" v-for="item in ruMeng">
            <li class="lb">
              <span>{{item.num1}}</span>
              <span>{{item.num2}}</span>
              <span>{{item.num3}}</span>
              <span>{{item.num4}}</span>
              <el-button style="margin-left: 40vw" @click="start(item.id)">开始练习</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="普通" name="second">
          <ul class="ul" v-for="item in puTon">
            <li class="lb">
              <span>{{item.num1}}</span>
              <span>{{item.num2}}</span>
              <span>{{item.num3}}</span>
              <span>{{item.num4}}</span>
              <el-button style="margin-left: 40vw">开始练习</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="初级" name="third">
          <ul class="ul" v-for="item in chuJi">
            <li class="lb">
              <span>{{item.num1}}</span>
              <span>{{item.num2}}</span>
              <span>{{item.num3}}</span>
              <span>{{item.num4}}</span>
              <el-button style="margin-left: 40vw">开始练习</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="中级" name="fourth">
          <ul class="ul" v-for="item in zhonJi">
            <li class="lb">
              <span>{{item.num1}}</span>
              <span>{{item.num2}}</span>
              <span>{{item.num3}}</span>
              <span>{{item.num4}}</span>
              <el-button style="margin-left: 40vw">开始练习</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="高级" name="five">
          <ul class="ul" v-for="item in gaoJi">
            <li class="lb">
              <span>{{item.num1}}</span>
              <span>{{item.num2}}</span>
              <span>{{item.num3}}</span>
              <span>{{item.num4}}</span>
              <el-button style="margin-left: 40vw">开始练习</el-button>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<style scoped>
.ul {
  width: 70vw;
}

.ul li {
  margin-top: 10px;
}

.ul .lb {
  margin-left: 20px;
  border: 1px solid #e0e0e0;
  padding: 20px;
}

.ul li span {
  margin-left: 10px;
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 1px solid #e0e0e0;
  text-align: center;
  line-height: 50px;
}

.header .title {
  font-size: 32px;
  height: 100px;
  color: #6b778c;
  font-weight: 600;
  line-height: 100px;
  margin: 0 auto;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.header {
  height: 10vh;
  border: 1px solid #e0e0e0;
}

.left {
  border: 1px solid #e0e0e0;
  height: 90vh;
}
</style>